<template>
  <div class="container-fluid">
    <div class="row center-block">
      <div class="col-md-12">
        <div class="row">
          <div class="col-md-12">
            <div class="box-body">
              <div class="box box-primary">
                <div class="box-header with-border">
                  <h3 class="box-title">角色列表</h3>
                  <div class="box-tools pull-right">
                    <button type="button" class="btn btn btn-success">
                      <i class="fa fa-plus" @click="showAdd">新增角色</i>
                    </button>
                  </div>
                </div>
                <div class="box-body">
                  <section class="content" id="roleDetail">
                    <div class="row">
                      <el-table stripe :sort-change="sortChanged" :empty-text="emptyText" :key='id' :highlight-current-row='true' :data="roles" border style="width: 100%">
                        <el-table-column fixed type='index' label="序号" :width='80'></el-table-column>
                        <el-table-column v-for='col in this.columns' :fixed='col.fixed?col.fixed:false' :key="col.prop" :width='col.width' :prop='col.prop' :label='col.label' :sortable='col.sortable' :formatter='col.formatter'></el-table-column>
                        <el-table-column fixed="right" label="操作" width="320">
                          <template scope="scope">
                            <!-- <el-button type="success" @click="view(scope.row)">
                              <i class="fa fa-eye">查看</i>
                            </el-button> -->
                            <el-button type="primary" @click="editRow(scope.row)">
                              <i class="fa fa-edit">编辑</i>
                            </el-button>
                            <el-button type="warning" @click="deleteRow(scope.row)">
                              <i class="fa fa-trash">删除</i>
                            </el-button>
                          </template>
                        </el-table-column>
                      </el-table>
                    </div>
                  </section>
                </div>
              </div>
            </div>
          </div>
        </div>
        <el-dialog title='新增角色' :visible.sync="addVisible" :modal="false" size="small">
          <roleEdit ref='roleAdd' v-if='addVisible' v-bind:isReadOnly="false"></roleEdit>
          <span slot="footer" class="dialog-footer">
            <el-button @click="addVisible = false">关 闭</el-button>
            <el-button type="primary" @click="add">确 定</el-button>
          </span>
        </el-dialog>
        <el-dialog title='编辑角色' :visible.sync="editVisible" :modal="false" size="small">
          <roleEdit ref='roleEdit' v-if='editVisible' :role="selectedRole" v-bind:isReadOnly="false"></roleEdit>
          <span slot="footer" class="dialog-footer">
            <el-button @click="editVisible = false">关 闭</el-button>
            <el-button type="primary" @click="updateRole">确 定</el-button>
          </span>
        </el-dialog>
      </div>
    </div>
  </div>
</template>
<script>
import Common from "./common"
import Utils from "../../common/utils"
import roleEdit from "../mycomponents/role/roleEdit"
let util = new Utils()
export default {
  name: "roleMgr",
  data() {
    return {
      addVisible:false,
      editVisible: false,
      viewVisible:false,
      columns:util.getRolesColumns(),
      emptyText: '空',
      id:'id',
      selectedRole: null,
      queryData: util.getDefaultRoleQueryData(4),
      helper: null,
      roles : null
    }
  },
  components: {
    roleEdit
  },
  created: function() {
    this.helper = new Common()
    this.getRoles()
  },
  mounted: function() {
    this.$nextTick(() => {
      this.helper.autoheight("roleDetail")
    })
  },
  methods: {
    deleteRow(row){
      var that = this
      util.deleteRole(row.id,function(response) {
        that.getRoles()
      }, function(response) {
        console.log('delete roles failed:' + response.data)
      })
    },
    editRow(row){
      this.getRole(row)
      this.editVisible = true
    },
    showAdd(){
      this.selectedRole = null
      this.addVisible = true
    },
    add(){
      var that = this
      var newRole = this.$refs.roleAdd.getRole()
      util.addRoles(newRole,function(response) {
        that.getRoles()
        that.addVisible = false
      }, function(response) {
        console.log('query roles failed:' + response.data)
      })
    },
    getEmptyText() {
      return '空'
    },
    arrayToString: function(array) {
      return array.toString()
    },
    getRoles() {
      var that = this
      util.listRoles(this.queryData, function(response) {
        if(response.body.result == 1){
          that.roles = response.body.body
        }
        else{
          that.onFail(response.body.result)
        }
      }, function(response) {
        console.log('query roles failed:' + response.data)
      })
    },
    sortChanged(sortProp) {
      this.queryData.orders.fields = sortProp.prop
      this.queryData.orders.desc = sortProp.order
    },
    delete(row) {
      console.log('delete role:' + JSON.stringify(row))
      var that = this
      util.deleteRole(row.id, (response) => {
        that.getRoles()
      }, (response) => {
        console.log('delete role:' + response.data)
      });
    },
    view(row) {
      console.log('view role:' + JSON.stringify(row))
      this.getRole(row)
      this.viewVisible=true
    },
    onFail(res){

    },
    updateRole(){
      var that = this
      var editRole = this.$refs.roleEdit.getRole()
      util.updateRole(editRole,function(response) {
        that.getRoles()
        that.editVisible = false
      }, function(response) {
        console.log('query roles failed:' + response.data)
      })
    },
    getRole(row){
      for(var role in this.roles){
        if(this.roles[role].id == row.id){
          this.selectedRole = this.roles[role]
          break
        }
      }
    },
    edit(row) {
      this.getRole(row)
      this.editVisible = true
    },
    submitNewRole: function() {

    },
    clearEditData: function() {

    }
    // getRole: function(roleId) {
    //   for (var index in this.roles) {
    //     if (this.roles[index].id == roleId) {
    //       return this.roles[index]
    //     }
    //   }
    //   return null
    // }
  }
}
</script>

